﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <style>
        html, body {
            border: 0px;
            margin: 0px;
            height: 100%;
            font-family: 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
            overflow: hidden;
        }

        .wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
        }

        #dropdownContainer {
            min-height: 30px;
            padding: 5px;
            flex-grow: 0;
            visibility: hidden;
        }

            #dropdownContainer select {
                display: inline-block;
                margin-right: 15px;
                padding: 3px;
                font-size: 1em;
            }

        #reportFrame {
            width: 100%;
            flex-grow: 1;
            border: 0;
        }

        @media (max-width: 720px) {
            #dropdownContainer {
                position: static;
            }
            #dropdownContainer select {
                width: 100%;
                margin-bottom: 5px;
            }
        }
    </style>
    <script src="powerbi.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <div id="dropdownContainer">
            <select id="reportsDropdown">
                <option>Loading</option>
            </select>
            <select id="pagesDropdown"></select>
        </div>
        <iframe id="reportFrame"></iframe>
    </div>
    <div id="reportContainer" style="display:none"></div>
    <script>
        var accessToken;
        var currentOrientation;
        var showFilterPane;
        var storage = window.localStorage;

        function getReport() {
            const embedContainer = document.getElementById('reportContainer');
            return powerbi.get(embedContainer);
        }

        function refreshToken(token) {
            const report = getReport();
            accessToken = token;
            report.setAccessToken(token);
        }

        function loadGroups(token, reports, defaultReport, orientation, showFilter) {
            accessToken = token;
            currentOrientation = orientation;
            showFilterPane = showFilter;

            document.getElementById('dropdownContainer').style.visibility = 'visible';

            var reportsDDL = resetDropdown('reportsDropdown');

            reportsDDL.style.display = reports.length == 1 ? 'none' : 'inline-block';

            reports.forEach(function (report) {
                if (report.id == defaultReport.id) {
                    reportsDDL.innerHTML += `<option value='${report.id}' selected>${report.name}</option>`;
                }
                else {
                    reportsDDL.innerHTML += `<option value='${report.id}'>${report.name}</option>`;
                }
            });

            reportsDDL.addEventListener('change', function (e) {
                var id = e.target.value;
                var selectedReport = reports.find(function (report) {
                    return report.id == id;
                });

                if (selectedReport) {
                    loadReport(selectedReport);
                }
            });

            loadReport(defaultReport);
        }

        function loadReport(embedReport) {
            const models = window['powerbi-client'].models;

            storage.accessToken = accessToken;
            storage.embedUrl = embedReport.embedUrl;
            storage.reportId = embedReport.id;
            storage.showFilterPane = showFilterPane;

            const config = {
                type: 'report',
                tokenType: models.TokenType.Aad,
                accessToken: accessToken,
                embedUrl: embedReport.embedUrl,
                id: embedReport.id,
                permissions: models.Permissions.Read,
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false
                }
            };

            const report = powerbi.load(document.getElementById('reportContainer'), config);

            document.getElementById('reportFrame').style.visibility = 'visible';

            var pagesDDL = resetDropdown('pagesDropdown', '<option>Loading</option>');

            report.off("loaded");
            report.on("loaded", function () {
                loadPages();
            });
        }

        function loadPages() {
            var report = getReport();

            report.getPages()
                .then(function (pages) {
                    var pagesDDL = resetDropdown('pagesDropdown');
                    pages.forEach(function (page) {
                        pagesDDL.innerHTML += `<option value='${page.name}'>${page.displayName}</option>`;
                    });

                    pagesDDL.addEventListener('change', function (e) {
                        var name = e.target.value;
                        var findPage = pages.find(function (page) {
                            return page.name == name;
                        });

                        if (findPage) {
                            findPage.setActive();
                            RefreshReport(findPage);
                        }
                    });

                    report.off("pageChanged");
                    report.on("pageChanged", function (event) {
                        var page = event.detail.newPage;

                        if (pagesDDL.value != page.name) {
                            pagesDDL.value = page.name;
                            triggerEvent(pagesDDL, 'change');
                        }
                    });

                    if (pages.length > 0) {
                        RefreshReport(pages[0]);
                    }
                })
                .catch(function (error) {
                });
        }

        function rotate(orientation) {
            const report = getReport();

            // do rotate only when the report is already loaded previously
            if (!currentOrientation) {
                return;
            }

            currentOrientation = orientation;
            report.getPages()
                .then(function (pages) {
                    var selectedPageName = document.getElementById("pagesDropdown").value;
                    var findPage = pages.find(function (page) {
                        return page.name == selectedPageName;
                    });
                    if (findPage) {
                        RefreshReport(findPage);
                    }
                })
        }

        function RefreshReport(page) {
            const models = window['powerbi-client'].models;
            const report = getReport();
            storage.pageName = page.name;

            if (currentOrientation == "Portrait"
                || currentOrientation == "PortraitFlipped") {
                page.hasLayout(models.LayoutType.MobilePortrait)
                    .then(function (hasLayout) {
                        if (hasLayout) {
                            storage.viewType = "MobilePortrait";
                        }
                        else {
                            storage.viewType = "Desktop";
                        }
                        document.getElementById('reportFrame').src = "ReportContainer.html";
                    });
            }
            else if (currentOrientation == "Landscape"
                || currentOrientation == "LandscapeFlipped") {
                page.hasLayout(models.LayoutType.MobileLandscape)
                    .then(function (hasLayout) {
                        if (hasLayout) {
                            storage.viewType = "MobileLandscape";
                        }
                        else {
                            storage.viewType = "Desktop";
                        }
                        document.getElementById('reportFrame').src = "ReportContainer.html";
                    });

            }
            else if (currentOrientation == "") {
                storage.viewType = "Desktop";
                document.getElementById('reportFrame').src = "";
                document.getElementById('reportFrame').src = "ReportContainer.html";
            }
        }

        function clearReport() {
            document.getElementById('dropdownContainer').style.visibility = 'hidden';
            document.getElementById('reportFrame').style.visibility = 'hidden';

            resetDropdown('pagesDropdown');
        }

        function resetDropdown(elemId, innerHTML) {
            var elem = document.getElementById(elemId);

            // clone and replace node to remove all events
            var elemTemp = elem.cloneNode();
            elem.parentNode.replaceChild(elemTemp, elem);
            elem = elemTemp;

            // reset inner HTML
            elem.innerHTML = innerHTML || '';

            return elem;
        }

        function triggerEvent(elem, event) {
            if ("createEvent" in document) {
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent(event, false, true);
                elem.dispatchEvent(evt);
            }
            else {
                elem.fireEvent("on" + event);
            }
        }

    </script>
</body>
</html>
